<template>
	<view class="main-cont">
		<view class="main-top box box-pack-between box-align-center padd20">
			<view class="uni_headlerBox">
				<!-- <view class="title">
					{{rwinfo.title}}444
				</view> -->
				<!--<view class="limit-time mt10">
					截止日期：{{rwinfo.endTime}}
				</view> -->
				<view class="uni_header">
					<view class="uni_headerLeft">
						<view class="uni_top">
							{{rwinfo.title}}
						</view>
						<!-- <view class="uni_btm">
							2023-01-06 &nbsp;&nbsp;14:00截止
						</view> -->
					</view>
					<!-- <view class="uni_headerRight">
						<image class="uni_headerImg" src="../static/share.png" mode=""></image>
					</view> -->
				</view>
			</view>
		</view>

		<view class="padd20 detail">
			<view class="uni_detailTitle">
				<view class="uni_detailLeft">
					<view class="uni_left"></view>
					<view class="uni_center">
						实践任务详情
					</view>
				</view>
				<view class="uni_detaliRight" @click="handlerUnfold">
					<view class="uni_rightTit">
						展开
					</view>
					<view class="uni_rightImg">
						<image class="uni_img" :src="arrowSrc" mode=""></image>
					</view>
					<!-- <view class="uni_rightImg" v-show="showUnfold === false">
						<image class="uni_img" src="../static/class/zhankai.png" mode=""></image>
					</view> -->
				</view>
			</view>

		</view>
		<transition name="fade">
			<view class="uni_content" v-if="showUnfold">
				<view class="mb20">
					<view class="tip">
						实践视频
					</view>
					<view class="cont">
						<video class="uni_video" :src="rwinfo.videoUrl" controls></video>
					</view>
				</view>
				<view class="mb20">
					<view class="tip">
						劳动目标
					</view>
					<view class="cont padd20" v-html="rwinfo.ldmb">
					</view>
				</view>
				<view class="mb20">
					<view class="tip">
						场所与工具
					</view>
					<view class="cont padd20" v-html="rwinfo.csygj">
					</view>
				</view>
				<view class="mb20">
					<view class="tip">
						劳动安全及规则
					</view>
					<view class="cont padd20" v-html="rwinfo.aqygz">
					</view>
				</view>
				<view class="mb20">
					<view class="tip">
						组织准备
					</view>
					<view class="cont padd20" v-html="rwinfo.zzzb">
					</view>
				</view>
				<view class="mb20">
					<view class="tip">
						具体流程
					</view>
					<view class="cont padd20" v-html="rwinfo.jtly">
					</view>
				</view>
			</view>
		</transition>

		<view class="padd20 stu-cont">
			<view class="top box box-align-center box-pack-between">
				<view class="">
					已完成：{{stuSjList.length}}人
				</view>
				<view class="">
					按时间
				</view>
			</view>
			<view class="" v-if="stuSjList.length !=0">
				<view class="bottom box box-tb box-pack-start" v-for="(item,i) in stuSjList" :key="i">
					<view class="box box-pack-between box-align-center">
						<view class="stu-info box box-pack-start box-align-center">
							<u-avatar :src="item.icon" mode="square" size="78"></u-avatar>
							<view class="box box-tb box-pack-start ml10">
								<view class="stu-name">
									{{item.name}}
								</view>
								<view class="time">
									{{item.createTime}}
								</view>
							</view>
						</view>
						<view class="score">
							+ {{item.score!=null?item.score:0}}分
						</view>
					</view>
					<view class="content">
						<view class="text">
							{{item.cont}}
						</view>
						<view class="images box box-align-start">
							<view class="item mr10" v-for="(ite,index) in item.stuCont" :key="index"
								@click="previewImage(item.stuCont,index)">
								<u-image :src="ite.videoImg" width="152rpx" height="152rpx" v-if="ite.type == 'mp4'">
									<u-loading slot="loading"></u-loading>
								</u-image>
								<u-image :src="ite.url" width="152rpx" height="152rpx" v-else>
									<u-loading slot="loading"></u-loading>
								</u-image>
								<u-image src="@/static/home/icon_play.png" width="40rpx" height="40rpx" class="posa"
									v-if="ite.type =='mp4'">
									<u-loading slot="loading"></u-loading>
								</u-image>
							</view>
						</view>
						<!-- <view class="pingyu" style="margin-left: 96rpx;">
								评语：{{item.comment!=null?item.comment:'暂无评语'}}
							</view> -->
					</view>
				</view>
			</view>
			<view class="box box-align-center box-pack-center" style="height: 80rpx;" v-else>
				暂无数据
			</view>
		</view>

		<view class="py box box-align-center box-pack-center" v-if="wpynum!=0">
			<view class="btn" @click="goPy()">
				批阅
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sjId: '',
				planid: '',
				classid: '',
				rwinfo: {
					title: '',
					endTime: ''
				},
				stuSjList: [],
				wpynum: 0,
				showUnfold: false
			}
		},
		onLoad(opt) {
			console.log(opt, '详情opt数据');
			this.sjId = opt.id
			this.planid = opt.planid
			this.classid = opt.classid != `null` ? opt.classid : ''
			this.setTitle();

			this.getLdsjInfo();
			this.getRwWpyNum();
			// this.wpynum = opt.wpynum;
		},
		computed: {
			arrowSrc() {
				return this.showUnfold ? require('../static/class/shouqi.png') : require('../static/class/zhankai.png');
			}
		},
		methods: {
			getLdsjInfo() {
				let params = {
					sjid: this.sjId,
					planid: this.planid,
					classid: this.classid
				};
				//console.log(">>>>>>")
				this.$api.post({
					url: '/yclassldsjtask/getLdsjInfo'
				}, params).then(res => {
					//console.log(res);
					this.rwinfo = res.rwinfo;
					this.stuSjList = res.list;
				})
			},
			getRwWpyNum() {
				let params = {
					sjid: this.sjId,
					planid: this.planid,
					classid: this.classid
				};
				this.$api.post({
					url: '/yclassldsjtask/getRwWpyNum'
				}, params).then(res => {
					//console.log(res);
					this.wpynum = res.num;
				})
			},
			setTitle() {
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '#7686F6'
				})
			},
			goStuSort(item) {
				uni.navigateTo({
					url: '/pageHome/stuSort'
				})
			},
			goPy() {
				uni.navigateTo({
					url: '/pageHome/pyList?planid=' + this.planid + '&sjid=' + this.sjId
				})
			},
			previewImage(val, i) {
				if (val[i].type == `mp4`) {
					uni.navigateTo({
						url: `/pageHome/video?url=` + val[i].url
					})
				} else {
					let it = JSON.stringify(val)
					uni.setStorage({
						key: 'item',
						data: it
					})
					uni.navigateTo({
						url: `/stupageHome/showFile?index=` + i + `&val=` + encodeURIComponent(it)
					})
				}
			},

			// 点击展开
			handlerUnfold() {
				console.log(11111)
				this.showUnfold = !this.showUnfold
			}
		}
	}
</script>

<style scoped lang="scss">
	.main-cont {
		height: 100%;
		display: flex;
		flex-direction: column;
		// justify-content: center;

		.main-top {
			width: 100%;
			height: 140rpx;
			background-color: #7686F6;
			border-radius: 0 0 30rpx 30rpx;
			display: flex;
			justify-content: space-between;

			.uni_headlerBox {
				width: 100%;
				display: flex;
				justify-content: space-between;

				.uni_header {
					width: 100%;
					display: flex;
					justify-content: space-between;
					// position: relative;

					.uni_headerLeft {
						// background-color: bisque;

						.uni_top {
							// width: 386rpx;
							height: 39rpx;
							font-size: 38rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #FFFFFF;
							line-height: 42rpx;
						}

						.uni_btm {
							// width: 305rpx;
							height: 26rpx;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							margin: 20rpx 0 62rpx 0;
						}
					}

					.uni_headerRight {
						// background: red;

						.uni_headerImg {
							margin-top: 20rpx;
							width: 38rpx;
							height: 38rpx;
						}

						// position: absolute;
						// right: 0rpx;
						// top: 52rpx;
					}
				}
			}

			// .title {
			// 	font-size: 32rpx;
			// 	color: #fff;
			// }

			// .limit-time {
			// 	font-size: 22rpx;
			// 	color: #fff;
			// }

			// .sort {
			// 	width: 132rpx;
			// 	height: 48rpx;
			// 	background: #FEAA19;
			// 	border-radius: 24rpx;
			// 	color: #fff;
			// }
		}
	}

	.detail {
		box-sizing: border-box;
		width: 722rpx;
		height: 153rpx;
		margin: -30rpx auto 20rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 9rpx 46rpx 0rpx rgba(187, 205, 223, 0.14);
		border-radius: 34rpx;

		.uni_detailTitle {
			display: flex;
			justify-content: space-between;

			.uni_detailLeft {
				display: flex;
				margin-top: 10rpx;
				// align-items: center;

				.uni_left {
					width: 13rpx;
					height: 40rpx;
					background: #3541F3;
					border-radius: 7rpx;
				}

				.uni_center {
					margin-left: 21rpx;
					// width: 207rpx;
					height: 32rpx;
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #181623;
				}
			}

			.uni_detaliRight {
				display: flex;
				margin-top: 20rpx;

				.uni_rightTit {
					// width: 48rpx;
					height: 23rpx;
					font-size: 25rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #888F9E;
				}

				.uni_rightImg {
					width: 31rpx;
					height: 31rpx;
					margin-left: 10rpx;
					margin-top: 6rpx;

					.uni_img {
						width: 31rpx;
						height: 31rpx;
						transition: transform 2s ease;
						/* 过渡效果 */
					}

					.uni_img.rotate {
						transform: rotate(90deg);
						/* 旋转180度之后的状态 */
					}
				}
			}
		}
	}


	.uni_content {
		// margin: 0 auto;
		display: flex;
		// width: 722rpx;
		flex-direction: column;
		justify-content: center;
		// background: #aef;

		.mb20 {
			display: flex;
			flex-direction: column;
			margin-top: 4rpx;

			// margin: 0 auto;
			.tip {
				// width: 240rpx;
				height: 78rpx;
				line-height: 80rpx;
				padding-left: 60rpx;
				font-size: 34rpx;
				font-weight: bold;
				background: #fff;
			}

			.cont {
				width: 700rpx;
				background: #F8F9FC;
				margin: 0 auto;

				// width: 240rpx;
				// padding: 0 20rpx;
				.uni_video {
					margin-left: 60rpx;
				}
			}
		}

		// .tip {
		// 	text-align: center;
		// 	width: 240rpx;
		// 	height: 78rpx;
		// 	line-height: 120rpx;
		// 	font-size: 34rpx;
		// 	// border-bottom: 19rpx solid #FEB7AB;
		// 	font-weight: bold;

		// }

		// .cont {
		// 	// margin-top: 20rpx;
		// 	background: #F8F9FC;
		// 	border-radius: 10rpx;
		// 	margin: 20rpx 0;
		// }
	}


	/*设置动画开始*/
	.fade-enter,
	.fade-leave-to {
		transform: translateY(-100%);
	}

	.fade-enter-active,
	.fade-leave-active {
		transition: .1s;
	}

	.fade-enter-to {
		transform: translateY(0)
	}

	/*设置动画结束*/


	.stu-cont {
		width: 722rpx;
		background-color: #fff;
		border-radius: 20px;
		padding-bottom: 130rpx;

		.top {
			height: 80rpx;
			border-bottom: 2rpx solid #F0F1F8;
		}

		.bottom {
			margin-top: 40rpx;

			.text {
				margin-left: 96rpx;
			}

			.stu-name {
				color: #2F3142;
				font-size: 30rpx;
			}

			.time {
				color: #ABB0C4;
				font-size: 24rpx;
			}

			.score {
				color: #FF5A77;
				font-size: 30rpx;
			}

			.images {
				flex-wrap: wrap;
				margin-left: 96rpx;

				.item {
					position: relative;
					margin-bottom: 20rpx;

					.posa {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
				}
			}

		}
	}

	.py {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 130rpx;
		background-color: rgba(255, 255, 255, .9);

		.btn {
			text-align: center;
			width: 318rpx;
			height: 72rpx;
			line-height: 72rpx;
			background: linear-gradient(180deg, #FF929D, #FF5A77);
			border-radius: 31rpx;
			font-size: 30rpx;
			color: #fff;
		}
	}
</style>